<template>
    <div class="box-wrap">
        <div class="project-detail-wrap" v-if="defaultIndex==1">
            <div class="project-detail">
                <div class="project-detail-top" v-if="projectData.TrainingDetailInfo!=null">
                    <h3 class="project-detail-title">{{projectData.TrainingDetailInfo.TrainingName}}</h3>
                    <p class="project-detail-institutions">{{projectData.TrainingDetailInfo.OrgName}}</p>
                </div>
                <ul class="project-ul">
                    <li class="project-item" v-for="(item,key) of projectDataList" :key=key
                        @click.stop.prevent="navToDetail(item)">
                        <h3 class="project-tiem-title"><span>{{key+1}}</span>{{item.Title}}</h3>
                        <p class="project-tiem-desc">专家：{{item.Creator}}</p>
                        <p class="project-tiem-desc">时间：{{item.DateB}} 至 {{item.DateE}}</p>
                        <p class="project-tiem-desc">地点：{{item.Address}}</p>
                        <p class="project-tiem-desc">状态：{{item.StatusName}}</p>
                        <div class="footer-button-group">
                            <span class="button-item" v-if="item.Status!='1'&&item.Status!='0'"
                                @click.stop.prevent="goToPingjiaPage('pingjia',item)">评价</span>
                            <span class="button-item" v-if="queryType!=1&&RoleCode=='Expert'&&item.Status==1"
                                @click.stop.prevent="ExpertSetClassFn(item,2)">上课</span>
                            <span class="button-item" v-if="queryType!=1&&RoleCode=='Expert'&&item.Status==2"
                                @click.stop.prevent="ExpertSetClassFn(item,3)">下课</span>
                            <span class="button-item" @click.stop.prevent="goToNextPage('discuss',item)">讨论</span>
                        </div>
                    </li>
                </ul>
            </div>
            <p style="text-align: center;margin-top:40rpx;" v-if="moreText1">下拉加载更多</p>
            <p style="text-align: center;margin-top:40rpx;" v-if="noMoreText1">没有更多数据了</p>
            <div class="no-data-wrap" v-if="showNoData1">
                <img src="../../../static/tabs/noData.png" alt="">
            </div>
        </div>
        <div v-if="defaultIndex==2">
            <div class="project-manual" v-if="projectManualDataList.length">
                <div class="manual-ul-list" v-for="(item,key) of projectManualDataList" :key="key">
                    <div class="manual-item">
                        <div class="manual-item-header">
                            <h3 class="manual-item-title">{{item.TrainInfo.TrainingName}}</h3>
                            <p class="manual-item-institutions">{{item.TrainInfo.OrgName}}</p>
                        </div>
                        <div class="manual-item-info" v-for="(i,k) of item.ManualList" :key=k @click="goNextPage(i)">
                            <div class="info-title">{{i.Title}}</div>
                            <p>{{i.CreateTime}}</p>
                        </div>
                    </div>
                </div>
                <p style="text-align: center;margin-top:40rpx;" v-if="moreText2">下拉加载更多</p>
                <p style="text-align: center;margin-top:40rpx;" v-if="noMoreText2">没有更多数据了</p>
            </div>
            <div class="no-data-wrap" v-if="showNoData2">
                <img src="../../../static/tabs/noData.png" alt="">
            </div>
        </div>
        <div class="footer-nav-group" v-if="queryType==1&&from!='projectReport'">
            <div class="footer-nav-item blue-bg" @click="switchPage(2)">手册</div>
            <!-- <div class="footer-nav-item" @click.stop.prevent="goToNextPage('projectManual')">手册</div> -->

            <div class="footer-nav-item" @click="switchPage(1)">课程</div>
        </div>
        <div class="footer-nav-group" v-else-if="queryType==2&&RoleCode=='User'">
            <div class="footer-nav-item" @click.stop.prevent="goToNextPage('projectManual')">手册</div>
            <div class="footer-nav-item" @click.stop.prevent="checkInFn"
                :class="[RoleCode!='User'?'opacity-bg':'',checkInBool?'':'opacity-bg']">
                签到
            </div>
            <div class="footer-nav-item" @click.stop.prevent="overallRatingJump"
                :class="[RoleCode=='Leader'?'opacity-bg':'',projectData.TrainingDetailInfo.ShowStatus=='1'?'':'opacity-bg']">
                总评</div>
            <div class="footer-nav-item" @click.stop.prevent="projectSummarizeJump"
                :class="[RoleCode=='Leader'?'opacity-bg':'',projectData.TrainingDetailInfo.ShowStatus=='1'?'':'opacity-bg']">
                总结</div>
        </div>
        <div class="footer-nav-group" v-if="queryType==2&&RoleCode=='Leader'">
            <div class="footer-nav-item blue-bg" @click.stop.prevent="goToNextPage('projectManual')">手册</div>
            <div class="footer-nav-item" @click.stop.prevent="attendance">出勤率</div>
        </div>
        <van-toast id="van-toast" />
        <van-dialog id="van-dialog" />
    </div>
</template>

<script>
    import { TrainingDetail, ExpertSetClass, StudentSign, QXTrainingManualList } from '@/providers/service'
    export default {
        data() {
            return {
                projectData: {
                    TrainingDetailInfo: {},
                    OtherCourseList: []
                },
                queryId: '',
                queryType: '',
                userInfo: {},
                RoleCode: '',
                PageIndex: 0,
                PageSize: 10,
                projectDataList: [],
                projectManualDataList: [],
                loadMoreBool: true,
                defaultIndex: 1,
                checkInBool: false,
                showNoData1: false,
                showNoData2: false,
                showLoadBool: true,
                from: '',
                moreText1:false,
                noMoreText1:false,
                moreText2:false,
                noMoreText2:false,
            }
        },
        onUnload() {
            this.showLoadBool = true;
            this.showNoData1 = false
            this.showNoData2 = false
        },
        onShow() {
            if (!this.showLoadBool) { return false }
            let { TID, type, defaultIndex, from } = this.$route.query;
            this.entranceType = type == 1? 'report':'pingjia'
            this.from = from
            wx.setNavigationBarTitle({
                title: type == 1 ? '项目详情' : '进入项目',
            });
            this.defaultIndex = 1;
            if (defaultIndex) {
                this.defaultIndex = defaultIndex;
            }
            this.PageIndex = 0;
            this.projectDataList = []
            this.projectManualDataList = []
            this.queryId = TID;
            this.queryType = type;
            this.userInfo = wx.getStorageSync('userInfo')
            this.RoleCode = this.userInfo.RoleCode
            if (type == 1) {
                if (this.defaultIndex == 2) {
                    this.getData()
                } else {
                    this.getProjectData();
                }
            } else {
                this.defaultIndex = 1;
                this.getProjectData();
            }
        },
        onPullDownRefresh() {
            this.PageIndex = 0;
            if (this.defaultIndex == 2) {
                this.projectManualDataList = []
                this.moreText2 = false
                this.noMoreText2 = false
                this.getData()
            } else {
                this.projectDataList = []
                this.moreText1 = false
                this.noMoreText1 = false
                this.getProjectData();
            }
            wx.stopPullDownRefresh()
            this.$toast('刷新成功')
        },
        // 上拉加载
        onReachBottom() {
            if (!this.moreText1 || !this.moreText2) {
                return false
            };
            if (this.defaultIndex == 2) {
                this.getData()
            } else {
                this.getProjectData();
            }
        },
        methods: {
            goNextPage(item) {
                this.$router.push({ path: '/pages/project/projectManualDetail', query: { ID: item.ID, TID: item.TID } })
            },
            switchPage(type) {
                if (this.defaultIndex == type) { return false }
                this.defaultIndex = type
                this.PageIndex = 0;
                this.loadMoreBool = true;
                if (type == 2) {
                    this.moreText2 = false
                    this.noMoreText2 = false
                    this.projectManualDataList = []
                    this.getData()
                } else {
                    this.moreText1 = false
                    this.noMoreText1 = false
                    this.projectDataList = []
                    this.getProjectData();
                }
            },
            async getData() {
                let { TID, type } = this.$route.query;
                try {
                    this.userInfo = wx.getStorageSync('userInfo')
                    let { RoleCode, UserID } = this.userInfo
                    let res = await QXTrainingManualList({
                        TID,
                        UserID,
                        PageSize: this.PageSize,
                        PageIndex: this.PageIndex,
                    })
                    let _list = res && res.length ? res : []
                    //noData
                    if (!_list.length) {
                        if(this.PageIndex===0){
                            this.showNoData2 = true
                        }else{
                            this.noMoreText2 = true
                            this.moreText2 = false
                        }
                    }else{
                        this.noMoreText2 = _list.length < 10 ?true:false
                        this.moreText2 = !this.noMoreText2
                        this.PageIndex = this.PageIndex + 1;
                        this.projectManualDataList = [...this.projectManualDataList, ..._list]
                    }
                } catch (error) {
                    console.log(error)
                }
            },
            attendance() {
                let { TrainingName } = this.projectData.TrainingDetailInfo
                let { TID } = this.$route.query
                this.$router.push({
                    path: '/pages/projecReport/attendance',
                    query: {
                        TIDcql: TID,
                        TrainingName: TrainingName
                    }
                })
            },
            goToPingjiaPage(name, item) {
                // if(item.CStatus===2){
                //       this.$toast('以评价')
                //     return false
                // }
                let Title = item.Title
                let TType = item.TType
                let {
                    TID
                } = this.$route.query;
                this.$router.push({
                    path: `/pages/new/${name}`,
                    query: {
                        TID,
                        OtherCourseID: item.ID,
                        Title,
                        entranceType: this.entranceType,
                        CStatus: item.CStatus,
                        ExpertID: item.ExpertID,
                        TType
                    }
                })
            },
            projectSummarizeJump() {
                if (this.projectData.TrainingDetailInfo.ShowStatus != '1') { return false }
                let { TID } = this.$route.query;
                this.$router.push({ path: `/pages/projectSummarize/projectSummarize`, query: { TID } })
            },
            overallRatingJump() {
                if (this.projectData.TrainingDetailInfo.ShowStatus != '1') { return false }
                let Evaluation = this.projectData.TrainingDetailInfo.Evaluation
                let Type =  this.projectData.TrainingDetailInfo.Type
                let TStatus = this.projectData.TrainingDetailInfo.TStatus
                let { TID } = this.$route.query;
                this.$router.push({ path: '/pages/new/zongping', query: { TID, TStatus,Type} })
            },
            navToDetail(item) {
                let {
                    TID
                } = this.$route.query;
                this.$router.push({
                    path: '/pages/new/courseInfo',
                    query: {
                        TID,
                        ID: item.ID
                    }
                })
            },
            async ExpertSetClassFn(item, Status, key) {
                this.$dialog.confirm({
                    title: '温馨提示',
                    message: Status == '2' ? '确认上课吗？' : '确认下课吗？',
                    selector: '#van-dialog'
                }).then(async (result) => {
                    let { RoleCode, UserID } = this.userInfo
                    try {
                        let res = await ExpertSetClass({
                            ExpertID: UserID,
                            CourseID: item.ID,
                            Status
                        })
                        item.Status = item.Status == 1 ? 2 : 3;
                        let mydata = new Date(item.DateE);
                        let newdata = mydata.getTime();
                        let olddata2 = item.DateE.replace(/-/g, '/');
                        let mydata2 = new Date(olddata2);
                        let newdata2 = mydata2.getTime();
                        item.StatusName = item.Status == 2 ? '上课中' : '已下课'
                        // if (Status == 2) {
                        //     console.log(new Date() >= newdata2)
                        //     if (+new Date() >= newdata2) {
                        //         item.Status = 2
                        //     } else {
                        //         item.Status = 3
                        //     }
                        // }
                        this.projectDataList = [...this.projectDataList];
                    } catch (error) {
                        console.log(error)
                    }
                }).catch(() => {
                    console.log('取消')
                });
            },
            async getProjectData() {
                let { RoleCode, UserID } = this.userInfo
                let { TID } = this.$route.query
                try {
                    let res = await TrainingDetail({
                        UserID,
                        TID,
                        PageSize: this.PageSize,
                        PageIndex: this.PageIndex,
                    })
                    let DateNowTime = +new Date();
                    if (this.tranlateTIme(res.TrainingDetailInfo.BTime) <= DateNowTime && this.tranlateTIme(res.TrainingDetailInfo.ETime) >= DateNowTime) {
                        this.checkInBool = true;
                    } else {
                        this.checkInBool = false;
                    }
                    this.projectData = res;
                    let _list = res.OtherCourseList && res.OtherCourseList.length ? res.OtherCourseList : []
                    //noData
                    if (!_list.length) {
                        if(this.PageIndex===0){
                            this.showNoData1 = true
                        }else{
                            this.noMoreText1 = true
                            this.moreText1 = false
                        }
                    }else{
                        this.noMoreText1 = _list.length < 10 ?true:false
                        this.moreText1 = !this.noMoreText1
                        this.PageIndex = this.PageIndex + 1;

                        for (let item of _list) {
                            let mydata = new Date(item.DateB);
                            let newdata = mydata.getTime();
                            let olddata2 = item.DateB.replace(/-/g, '/');
                            let mydata2 = new Date(olddata2);
                            let newdata2 = mydata2.getTime();
                            item.isShowBool = +new Date() >= newdata2
                        }
                        this.projectDataList = [...this.projectDataList, ..._list]
                    }
                } catch (error) {
                    console.log(error)
                }
            },
            tranlateTIme(dataTime) {
                let mydata = new Date(dataTime);
                let newdata = mydata.getTime();
                let olddata2 = dataTime.replace(/-/g, '/');
                let mydata2 = new Date(olddata2);
                let newdata2 = mydata2.getTime();
                return newdata2;
            },
            // 进入下一个页面
            goToNextPage(name, item) {
                let { TID } = this.$route.query
                console.log('一级评论的上层课程', item)
                if (item) {
                    this.$router.push({
                        path: `/pages/project/${name}`,
                        query: {
                            TID,
                            OtherCourseID: item.ID,
                            SavedSummary: item.SavedSummay,
                            DiscussID: item.DiscussID
                        }
                    })
                } else {
                    this.$router.push({
                        path: `/pages/project/${name}`,
                        query: {
                            TID
                        }
                    })
                }
            },
            checkInFn() {
                if (this.RoleCode != 'User') {
                    return false
                }
                if (!this.checkInBool) { return false }
                this.showLoadBool = false;
                wx.scanCode({
                    success: (res) => {
                        let _res = JSON.parse(res.result)
                        let { TID } = this.$route.query
                        let nowDate = +new Date()
                        if (TID != _res.TID) {
                            this.$toast('您扫的二维码不是您所参与项目的二维码，请联系教务确认签到二维码！')
                            return false;
                        }
                        if (nowDate > this.tranlateTIme(_res.QuickDate)) {
                            this.$toast('二维码已过期，请刷新')
                            return false;
                        }
                        let { RoleCode, UserID } = this.userInfo
                        StudentSign({
                            TID: _res.TID,
                            UserID
                        }).then((result) => {
                            console.log(result)
                            this.$toast('签到成功！')
                        }).catch((error) => {
                            console.log(error)
                        })
                    },
                    fail: (error) => {
                        console.log(error);
                    }
                })
            }
        }
    }
</script>
<style>
    page {
        height: 100%;
        width: 100%;
        background: white;
    }
</style>
<style scoped lang="less">
    .no-data-wrap {
        text-align: center;
        transform: translateY(30%);
    }

    .box-wrap {
        word-break: break-all;
        min-height: 100%;
        /* background: white; */
        position: relative;
    }

    .project-manual {
        position: relative;
        margin: 0 30rpx;
        padding: 40rpx 0 90rpx;
        border-radius: 8rpx;

        .manual-ul-list {
            position: relative;
            background: #edecf5;

            .manual-item {
                /* padding: 35rpx 0; */
                /* border-bottom: 1rpx solid #e0e0e3; */
                position: relative;

                .manual-item-header {
                    border-bottom: 1rpx solid #e0e0e3;
                    padding: 35rpx 40rpx 20rpx;

                    .manual-item-title {
                        font-size: 32rpx;
                        line-height: 40rpx;
                    }

                    .manual-item-institutions {
                        font-size: 24rpx;
                        color: #bbbbc0;
                    }
                }

                .manual-item-info {
                    padding: 22rpx 40rpx;
                    border-bottom: 1rpx solid #e0e0e3;

                    .info-title {
                        font-size: 30rpx;
                        color: #9d9c9f;
                    }

                    p {
                        font-size: 22rpx;
                        color: #bbbbc0;
                    }
                }
            }
        }
    }

    .project-detail-wrap {
        position: relative;
        background: white;
        padding: 60rpx 0;
        margin-bottom: 100rpx;

        .project-detail {
            margin: 0 50rpx;
            background: #ededf6;
            border-radius: 8rpx;

            .project-detail-top {
                padding-left: 40rpx;
                border-bottom: 1rpx solid #e0e0e3;
                padding-top: 20rpx;
                padding-bottom: 10rpx;
            }

            .project-detail-title {
                font-size: 32rpx;
                line-height: 40rpx;
            }

            .project-detail-institutions {
                font-size: 24rpx;
                color: #737374;
            }

            .project-ul {
                position: relative;

                .project-item {
                    padding: 40rpx 0 35rpx;
                    position: relative;
                    border-bottom: 1rpx solid #e0e0e3;

                    .project-tiem-title {
                        /*height: 58rpx;*/
                        width:91%;
                        line-height: 58rpx;
                        font-size: 28rpx;
                        color: #6b6a73;
                        background: #c0c866;
                        display: inline-block;
                        padding-right: 58rpx;
                        border-top-right-radius: 58rpx;
                        border-bottom-right-radius: 58rpx;
                        margin-bottom: 30rpx;

                        span {
                            color: #ffffff;
                            font-size: 40rpx;
                            line-height: 40rpx;
                            margin: 0 6rpx;
                        }
                    }

                    .project-tiem-desc {
                        font-size: 24rpx;
                        line-height: 40rpx;
                        color: #737374;
                        padding-left: 40rpx;
                    }

                    .footer-button-group {
                        font-size: 24rpx;
                        position: absolute;
                        right: 20rpx;
                        bottom: 35rpx;

                        .button-item {
                            padding: 8rpx 30rpx;
                            background: #f2af54;
                            color: #ffffff;
                            border-radius: 4rpx;
                            margin-left: 20rpx;
                        }
                    }
                }
            }
        }
    }

    .footer-nav-group {
        position: fixed;
        right: 0;
        left: 0;
        bottom: 0;
        height: 85rpx;
        line-height: 85rpx;
        display: flex;
        justify-content: center;
        align-content: center;
        background: #ffab3b;

        .footer-nav-item {
            flex: 1;
            text-align: center;
            color: #ffffff;
            font-size: 22rpx;

            &.opacity-bg {
                background: #ffd59d;
            }

            &.blue-bg {
                background: #4c9c83;
            }

            &:not(:last-of-type) {
                border-right: 2rpx solid #ffffff;
            }
        }
    }
</style>
